import { createStyles } from 'antd-style';

/**
 * Button 扩展样式 Hook
 * 
 * ⚠️ 此文件仅提供 ConfigProvider 主题系统无法实现的特殊交互效果
 * 
 * 基础样式（颜色、字体、间距、hover/active 状态等）请通过以下方式配置：
 * 1. 修改 DSL 文件 (Button.json)
 * 2. 更新主题配置 (themes/button.ts)
 * 3. 在应用根组件使用 ConfigProvider 应用主题
 * 
 * @example
 * ```tsx
 * const { styles } = useButtonStyles();
 * <Button className={styles.floatingEffect}>浮动效果按钮</Button>
 * ```
 */
export const useButtonStyles = createStyles(({ token, css }) => {
  return {
    /**
     * 浮动效果 - transform 动画（ConfigProvider 无法实现）
     */
    floatingEffect: css`
      transition: transform 0.2s ease;
      
      &:hover:not(:disabled):not(.ant-btn-disabled) {
        transform: translateY(-2px);
      }
      
      &:active:not(:disabled):not(.ant-btn-disabled) {
        transform: translateY(0);
      }
    `,

    /**
     * 脉冲效果 - 关键帧动画（ConfigProvider 无法实现）
     */
    pulseEffect: css`
      animation: pulse 2s ease infinite;
      
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
      }
    `,

    /**
     * 渐变背景 - 复杂渐变效果（ConfigProvider 无法实现）
     */
    gradientBackground: css`
      background: linear-gradient(135deg, ${token.colorPrimary} 0%, ${token.colorPrimaryHover} 100%);
      border: none;
      
      &:hover:not(:disabled):not(.ant-btn-disabled) {
        background: linear-gradient(135deg, ${token.colorPrimaryHover} 0%, ${token.colorPrimaryActive} 100%);
      }
    `,
  };
});
